<script setup lang="ts">
import { useRequest } from "alova/client";

import { useUserStore } from "@/stores/user";
import { Feedback } from "@/utils/feedback";

interface UserProfile {
    id: number;
    sn: string;
    email: string;
    username: string;
    nickname: string;
    avatar: string;
    realname: string;
    mobile: string;
    gender: string;
    channel: string;
    isDisabled: boolean;
    isNew: boolean;
    lastLoginIp: string;
    lastLoginAt: string;
    createdAt: string;
    title: string;
    style: string;
    address: string;
    website: string;
    weibo: string;
}

const profile = reactive<UserProfile>({
    id: 0,
    sn: "",
    email: "",
    username: "",
    nickname: "",
    avatar: "",
    realname: "",
    mobile: "",
    gender: "male", // 默认值
    channel: "",
    isDisabled: false,
    isNew: false,
    lastLoginIp: "",
    lastLoginAt: "",
    createdAt: "",
    title: "",
    style: "",
    address: "",
    website: "",
    weibo: ""
});

const saving = ref(false);

const { loading } = useRequest(Apis.User.findSelfInfo({})).onSuccess(res => {
    Object.assign(profile, res.data.data);
});

const userStore = useUserStore();
const saveProfile = async () => {
    saving.value = true;
    try {
        await Apis.User.update({
            pathParams: {
                id: profile.id + ""
            },
            data: {
                realname: profile.realname,
                username: profile.username,
                nickname: profile.nickname,
                email: profile.email,
                mobile: profile.mobile,
                gender: profile.gender as "male" | "female" | "unknown"
            }
        });
        userStore.setUserInfo(profile);
        Feedback.msgSuccess("保存成功！");
    } catch (error) {
        Feedback.msgError("保存失败！");
    } finally {
        saving.value = false;
    }
};

onMounted(() => {
    // loadProfile();
});
</script>

<template>
    <div class="mx-auto max-w-4xl p-6">
        <h1 class="mb-6 text-2xl font-bold text-gray-800">个人资料</h1>

        <div v-if="loading" class="py-10 text-center">
            <p class="text-gray-500">加载中...</p>
        </div>

        <div v-else class="space-y-6 rounded-lg bg-white p-6 shadow-md">
            <!-- 头像与基本信息 -->
            <div class="flex items-center space-x-6">
                <img :src="profile.avatar" alt="头像" class="h-20 w-20 rounded-full border object-cover" />
                <div>
                    <h2 class="text-xl font-semibold text-gray-900">{{ profile.nickname }}</h2>
                    <p class="text-gray-600">{{ profile.username }}</p>
                    <p class="text-sm text-gray-500">ID: {{ profile.sn }}</p>
                </div>
            </div>

            <!-- 可编辑表单 -->
            <form @submit.prevent="saveProfile" class="space-y-5">
                <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
                    <!-- 真实姓名 -->
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">真实姓名</label>
                        <input
                            v-model="profile.realname"
                            type="text"
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="请输入真实姓名"
                        />
                    </div>

                    <!-- 用户名 -->
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">用户名</label>
                        <input
                            v-model="profile.username"
                            type="text"
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="请输入用户名"
                        />
                    </div>

                    <!-- 昵称 -->
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">昵称</label>
                        <input
                            v-model="profile.nickname"
                            type="text"
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="请输入昵称"
                        />
                    </div>

                    <!-- 邮箱 -->
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">邮箱</label>
                        <input
                            v-model="profile.email"
                            type="email"
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="请输入邮箱"
                        />
                    </div>

                    <!-- 手机号 -->
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">手机号</label>
                        <input
                            v-model="profile.mobile"
                            type="tel"
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder="请输入手机号"
                        />
                    </div>

                    <!-- 性别 -->
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">性别</label>
                        <select
                            v-model="profile.gender"
                            class="w-full rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        >
                            <option value="male">男</option>
                            <option value="female">女</option>
                            <option value="unknown">其他</option>
                        </select>
                    </div>
                </div>

                <!-- 只读信息展示 -->
                <div class="mt-8 border-t border-gray-200 pt-6">
                    <h3 class="mb-4 text-lg font-medium text-gray-800">其他信息</h3>
                    <div class="grid grid-cols-1 gap-4 text-sm text-gray-600 md:grid-cols-2">
                        <div>
                            <span class="font-medium">注册时间：</span>
                            {{ new Date(profile.createdAt).toLocaleString() }}
                        </div>
                        <div>
                            <span class="font-medium">最后登录：</span>
                            {{ new Date(profile.lastLoginAt).toLocaleString() }}
                        </div>
                        <div><span class="font-medium">最后 IP：</span> {{ profile.lastLoginIp }}</div>
                        <div><span class="font-medium">状态：</span> {{ profile.isDisabled ? "已禁用" : "正常" }}</div>
                        <div><span class="font-medium">地址：</span> {{ profile.address || "—" }}</div>
                        <div><span class="font-medium">职位：</span> {{ profile.title || "—" }}</div>
                        <div v-if="profile.website">
                            <span class="font-medium">网站：</span>
                            <a :href="profile.website" target="_blank" class="text-blue-600 hover:underline">{{
                                profile.website
                            }}</a>
                        </div>
                        <div v-if="profile.weibo"><span class="font-medium">微博：</span> {{ profile.weibo }}</div>
                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="mt-6 flex justify-end">
                    <button
                        type="submit"
                        :disabled="saving"
                        class="rounded-md bg-blue-600 px-5 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-60"
                    >
                        {{ saving ? "保存中..." : "保存修改" }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>
